import { Card, Breadcrumb, Form, Button, Radio, Input, Upload, Space, Select, message } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { Link, useSearchParams } from "react-router-dom";
import "./index.scss";

// 富文本编辑器
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

import { useEffect, useRef, useState } from "react";
import { createArticleAPI, getArticleById, updateArticleAPI } from "@/apis/article";
import { useChannel } from "@/hooks/useChannel";
import { useForm } from "antd/es/form/Form";


const { Option } = Select
const Publish = () => {
    // 获取频道列表数据
    const { channelList } = useChannel()

    // 提交表单事件
    const formRef = useRef()
    const onFinish = async (formValue) => {
        // 手动校验选择的封面类型和实际上传的图片数量是否一致
        if (imageList.length !== imageType) return message.warning("封面类型和上传图片数量不一致")

        const { title, content, channel_id } = formValue
        const reqData = {
            // title: title,
            title,
            content,
            channel_id,
            // 封面图
            cover: {
                // 0-无图 1-1张 3-3张
                type: imageType,
                // 这里后台需要url数组 ["http://geek.itheima.net/uploads/1729064264702.png"]
                // 这是之前新增的写法，现在把编辑加进去
                // images: imageList.map(item => item.response.data.url)
                // 编辑+新增
                images: imageList.map(item => {
                    if (item.response){
                        // 新上传的图片
                        return item.response.data.url
                    }else{
                        // 编辑带过来，回填的图片
                        return item.url
                    }
                })
            }
        }
        if (articleId){
            // 调用接口编辑旧文章
            let newData = {
                ...reqData,
                id: articleId
            }
            let res2 = await updateArticleAPI(newData)
            if (res2.message == 'OK') {
                message.success("编辑成功")
            }
        }else{
            // 调用接口发布新文章
            let res1 = await createArticleAPI(reqData)
            if (res1.message == 'OK') {
                message.success("发布成功")
                // 清空表单
                formRef.current.resetFields()
                setImageList([])
            }
        }
        
        
    }

    // 上传图片回调函数
    const [imageList, setImageList] = useState([])
    const onChange = (value) => {
        // console.log(value);
        // value.fileList  是图片数据
        setImageList(value.fileList)
    }

    // 选择切换是否上传图片
    const [imageType, setImageType] = useState(0)
    const onTypeChange = (e) => {
        // 获取选中的value 赋值给 imageType，imageType可以驱动视图，作为if的判断条件
        setImageType(e.target.value)

        // 自己加的 切换的时候清空一下临时列表,这样上传之后切换不出问题
        setImageList([])
    }



    // 点击编辑打开这个页面 回填数据
    // 获取URL带过来的文章id
    const [searchParams] = useSearchParams()
    const articleId = searchParams.get('id')
    // 获取form实例
    const [form] = Form.useForm()
    // 页面加载完成就执行，所以使用useEffect方法
    useEffect(() => {
        const getArticleDetail = async () => {
            const res = await getArticleById(articleId)
            // form实例点setFieldsValue方法把数据回填。
            // form.setFieldsValue(res.data)
            // setFieldsValue方法要求数据格式是：{type:1} 而现在数据是：{cover:{type:1}} 所以需要转化一下
            const data = res.data
            const { cover } = data
            form.setFieldsValue({
                ...data,
                // 封面类型数据格式不对，需要第一层有个对应的字段，所以相当于把里面的type放到外面。
                type: cover.type
            })
            // 回填图片列表
            // 显示列表
            setImageType(cover.type)
            // 显示图片({url:url})
            if (cover.images !== undefined && cover.images.length > 0){
                setImageList(cover.images.map(url => {
                    return { url }
                }))
            }
        }
        if (articleId){
            // 点编辑过来的在调佣这个方法
            getArticleDetail()
        }
    }, [articleId, form])


    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: `${ articleId ? '编辑文章' : '发布文章'} ` }
                    ]} />
                }
            >
                <Form
                    labelCol={{span: 4}}
                    wrapperCol={{span: 16}}
                    // 这里的type竟然是影响控制选择封面图的type
                    initialValues={{type: 0}}
                    onFinish={onFinish}
                    ref={formRef}
                    form={form}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[
                            {required: true, message: '请输入文章标题'}
                        ]}
                    >
                        <Input style={{ width: 400}} placeholder="请输入文章标题" />
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[
                            { required: true, message: '请选择文章频道' }
                        ]}
                    >
                        <Select style={{ width: 400 }} placeholder="请选择文章频道">
                            {/* 选中项是value的值 */}
                            {channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option> )}
                        </Select>
                    </Form.Item>
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {/* 0-无图 1-1张 3-3张  大于0才显示上传按钮 */}
                        {imageType > 0 && <Upload
                            listType="picture-card"
                            showUploadList
                            name="image"
                            action={'http://geek.itheima.net/v1_0/upload'}
                            onChange={onChange}
                            // maxCount 的值限制最多上传多少张，刚好和imageType对应上
                            maxCount={imageType}
                            fileList={imageList}
                        >
                            <div style={{ marginTop: 8 }}>
                                <PlusOutlined />
                            </div>
                        </Upload>}
                        
                    </Form.Item>
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[
                            { required: true, message: '请输入文章内容' }
                        ]}
                    >
                        {/* 富文本编辑器 */}
                        <ReactQuill className="publish-quill" theme="snow" placeholder="请输入文章内容" />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{offset: 4}}
                    >
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">{articleId ? '编辑文章' : '发布文章'}</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish